<!-- src/components/TaskDetail.vue -->
<template>
  <div v-if="task" class="task-detail">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="任务名称">{{ task.name }}</el-descriptions-item>

      <el-descriptions-item label="风险等级">
        <el-tag :type="riskTagType" effect="dark">
          {{ task.riskLevel }}
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="进度">
        <el-progress
            :percentage="task.progress"
            :color="progressColor"
            :stroke-width="18"
            :text-inside="true"
        />
      </el-descriptions-item>

      <el-descriptions-item label="开始时间">
        {{ formattedTime }}
      </el-descriptions-item>

      <el-descriptions-item label="任务ID">
        <el-tag>#{{ task.id }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import type { Task } from '@/types/monitor'
import { computed } from 'vue'

const props = defineProps<{
  task: Task | null
}>()

const riskTagType = computed(() => {
  switch (props.task?.riskLevel) {
    case 'High': return 'danger'
    case 'Medium': return 'warning'
    case 'Low': return 'success'
    default: return 'info'
  }
})

const progressColor = computed(() => {
  const progress = props.task?.progress || 0
  if (progress > 80) return '#67C23A'
  if (progress > 50) return '#E6A23C'
  return '#F56C6C'
})

const formattedTime = computed(() => {
  if (!props.task) return ''
  return new Date(props.task.startTime).toLocaleString()
})
</script>

<style scoped>
.task-detail {
  padding: 10px;
}

.el-descriptions {
  margin-top: -10px;
}

.el-tag {
  margin-right: 5px;
}
</style>